import React from "react";
import { Card, CardContent, CardFooter } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
  CheckCircle,
  AlertTriangle,
  Settings,
  X,
  ChevronDown,
  ChevronUp,
} from "lucide-react";
import { useState } from "react";
const crossingTypeMap = {
  powerLineOutagePlus500: "跨越电力线路（带电）",
  powerLineOutagePlus110: "  跨越电力线路（不带电）",
  railway: "跨越普通铁路",
  railwayHighSpeed: "跨越高铁",
  firstHighway: "跨越高速公路(含全封闭一级公路)",
  highwayGradePlus2: "跨越公路(二级及以下公路)",
  navigableRivers: "跨越通航河流",
  noNavigableRivers: "跨越不通航河流",
  railwayNormal: "跨越通信线路",
  other: "其它",
};
const SchemeRecommendation = ({
  recommendationData,
  onClose,
  onApplyRecommendation,
}) => {
  const [showAlternative, setShowAlternative] = useState(false);
  const [expandedSteps, setExpandedSteps] = useState({});

  if (!recommendationData) {
    return (
      <Card>
        <div className="p-4">
          <h3 className="text-lg font-semibold mb-2">方案推荐</h3>
          <p>暂无推荐数据</p>
        </div>
        <CardFooter>
          <Button onClick={onClose}>关闭</Button>
        </CardFooter>
      </Card>
    );
  }

  const {
    methodTemplate,
    advantages,
    considerations,
    confidence,
    reasoning,
    alternativeMethods,
  } = recommendationData;

  const confidencePercentage = Math.round(confidence || 0);

  // 切换步骤展开状态
  const toggleStep = (stepId) => {
    setExpandedSteps((prev) => ({
      ...prev,
      [stepId]: !prev[stepId],
    }));
  };

  return (
    <div className="mx-auto bg-white rounded-lg shadow-md border border-gray-100  ">
      {/* 头部区域 */}
      <div className="bg-yellow-50 p-4 flex justify-between items-center">
        <h3 className="text-xl font-bold flex items-center">
          <span className="text-orange-500 mr-2">
            <AlertTriangle size={20} />
          </span>
          智能施工方案推荐
        </h3>
        <button
          onClick={onClose}
          className="text-gray-500 hover:text-gray-700 p-1"
        >
          <X className="w-5 h-5" />
        </button>
      </div>

      {/* 推荐理由区域 */}
      <div className="p-4 border-b border-gray-100">
        <h4 className="font-semibold mb-2 text-gray-700">推荐理由</h4>
        <p className="text-gray-600 text-sm">{reasoning}</p>
      </div>

      {/* 主要推荐方案 */}
      <div className="p-4">
        <h4 className="font-semibold mb-3 flex items-center text-gray-600">
          <span className="text-green-500 mr-1">
            <CheckCircle size={16} />
          </span>
          推荐方案 (匹配度: {confidencePercentage}%)
        </h4>

        <Card className="bg-green-50 border border-green-200 rounded-lg p-0 mb-4">
          <CardContent className="p-4">
            <div className="flex justify-between items-start">
              <div className="flex items-center">
                <div className="bg-green-100 p-2 rounded-lg mr-3">
                  <Settings className="text-green-600" />
                </div>
                <div>
                  <h5 className="text-lg font-semibold">
                    {methodTemplate.methodName}
                  </h5>
                  <Badge
                    variant="default"
                    className="bg-green-100 text-green-800 mt-1"
                  >
                    推荐方案
                  </Badge>
                </div>
              </div>
            </div>

            {/* 方案描述 */}
            <p className="text-sm mt-3 mb-4 text-gray-700">
              {methodTemplate.description}
            </p>

            {/* 适用场景 */}
            <div className="mb-4">
              <h6 className="font-medium text-gray-700 mb-1">适用场景</h6>
              <div className="flex flex-wrap gap-2">
                {methodTemplate.applicableScenarios.map((scenario, index) => (
                  <Badge
                    key={index}
                    variant="secondary"
                    className="bg-blue-50 text-blue-700"
                  >
                    {crossingTypeMap[scenario]}
                  </Badge>
                ))}
              </div>
            </div>

            {/* 施工步骤 */}
            <div className="mb-4">
              <h6 className="font-medium text-gray-700 mb-2">施工步骤</h6>
              <div className="space-y-2">
                {methodTemplate.constructionSteps.map((step) => (
                  <div
                    key={step.stepOrder}
                    className="border border-gray-200 rounded-md overflow-hidden"
                  >
                    <div
                      className="flex justify-between items-center p-3 bg-white cursor-pointer"
                      onClick={() => toggleStep(step.stepOrder)}
                    >
                      <div className="flex items-center">
                        <span className="bg-green-100 text-green-800 rounded-full w-6 h-6 flex items-center justify-center text-sm mr-2">
                          {step.stepOrder}
                        </span>
                        <span className="font-medium">{step.stepName}</span>
                      </div>
                      <div className="text-sm text-gray-500">
                        工期: {step.durationDays}天
                      </div>
                      {expandedSteps[step.stepOrder] ? (
                        <ChevronUp size={16} className="text-gray-500 ml-2" />
                      ) : (
                        <ChevronDown size={16} className="text-gray-500 ml-2" />
                      )}
                    </div>

                    {expandedSteps[step.stepOrder] && (
                      <div className="p-3 bg-gray-50 text-sm border-t border-gray-200">
                        <p className="text-gray-600 mb-2">{step.description}</p>
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </div>

            {/* 优势与注意事项 */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <h6 className="font-medium text-green-700 mb-2">优势</h6>
                <ul className="text-sm space-y-1">
                  {advantages.map((advantage, index) => (
                    <li key={index} className="flex items-start">
                      <CheckCircle className="h-4 w-4 text-green-500 mr-2 mt-0.5 flex-shrink-0" />
                      <span>{advantage}</span>
                    </li>
                  ))}
                </ul>
              </div>
              <div>
                <h6 className="font-medium text-orange-700 mb-2">注意事项</h6>
                <ul className="text-sm space-y-1">
                  {considerations.map((item, index) => (
                    <li key={index} className="flex items-start">
                      <AlertTriangle className="h-4 w-4 text-orange-500 mr-2 mt-0.5 flex-shrink-0" />
                      <span>{item}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </CardContent>
          <CardFooter className="p-4 border-t border-green-200">
            <Button
              onClick={() => onApplyRecommendation(methodTemplate)}
              className="bg-green-600 text-white hover:bg-green-700"
            >
              采用此方案
            </Button>
          </CardFooter>
        </Card>
      </div>

      {/* 备选方案 */}
      {alternativeMethods && alternativeMethods.length > 0 && (
        <div className="p-4 border-t border-gray-100">
          <Button
            className="flex items-center text-gray-700 hover:text-gray-900 mb-3 bg-transparent hover:bg-gray-100 border border-gray-200"
            onClick={() => setShowAlternative(!showAlternative)}
          >
            <span className="font-medium">备选方案</span>
            {showAlternative ? (
              <ChevronUp size={16} className="ml-2" />
            ) : (
              <ChevronDown size={16} className="ml-2" />
            )}
          </Button>

          {showAlternative && (
            <div className="space-y-4">
              {alternativeMethods.map((alternative, index) => (
                <Card key={index} className="bg-gray-50 border border-gray-200">
                  <CardContent className="p-4">
                    <h5 className="font-semibold mb-2">
                      {alternative.alternativeMethod.methodName}
                    </h5>
                    <p className="text-sm text-gray-600 mb-3">
                      {alternative.reason}
                    </p>

                    <p className="text-sm font-medium mb-1">方案描述:</p>
                    <p className="text-sm text-gray-600 mb-3">
                      {alternative.alternativeMethod.description}
                    </p>

                    <p className="text-sm font-medium mb-1">适用场景:</p>
                    <div className="flex flex-wrap gap-2 mb-3">
                      {alternative.alternativeMethod.applicableScenarios.map(
                        (scenario, i) => (
                          <Badge
                            key={i}
                            variant="secondary"
                            className="bg-gray-100"
                          >
                            {scenario}
                          </Badge>
                        )
                      )}
                    </div>

                    <Button
                      className="bg-green-600 text-white hover:bg-green-700"
                      variant="secondary"
                      size="sm"
                      onClick={() =>
                        onApplyRecommendation(alternative.alternativeMethod)
                      }
                    >
                      采用此备选方案
                    </Button>
                  </CardContent>
                </Card>
              ))}
            </div>
          )}
        </div>
      )}

      {/* 底部关闭按钮 */}
      <div className="p-4 border-t border-gray-100 flex justify-end">
        <Button variant="secondary" onClick={onClose}>
          关闭
        </Button>
      </div>
    </div>
  );
};

export default SchemeRecommendation;
